<template>
  <div class="colorAll">
    <div class="colorHost">
     <!-- <div class="colorHostTile">
        <p>热门彩种推荐</p>
      </div>-->
      <div class="colorHostList">
        <ul>
          <li v-for="colOf in colorOfData">
            <div class="hostListThe">
              <div class="hostListLine">
                <article class="hostListTheColor displayFlex">
                  <section><img :src="colOf.icon"/></section>
                  <section>
                    <h3>{{colOf.name}}</h3>
                    <p class="dataSec">第<span>{{colOf.number}}</span>期</p>
                    <!--<div class="timeHost"><time>00.00.00</time></div>-->
                  </section>
                </article>
                <article class="hostPeriod displayFlex">
                  <section>上期开奖</section>
                  <section>
                    <!--百家乐-->
                    <div class="baccarat" v-if="_Format.formatCode(colOf.code).baccarat">
                      <img :src="bankerIcon" alt="">
                      <img :src="_Modulation.getSmallCard(colOf.wave[resIndex],resItem?resItem:'?')" alt="" v-for="(resItem,resIndex) in colOf.data"
                           v-if="resIndex<4">
                      <img :src="idleIcon" alt="">
                    </div>
                    <!--大转盘-->
                    <p :class="{'red': _Format.lotColor(colOf.data[0], colOf.code) === 'red','black': _Format.lotColor(colOf.data[0], colOf.code) === 'black'}" v-if="_Format.formatCode(colOf.code).bigWheel">{{colOf.data[0]}}</p>
                    <!--号码想加-->
                    <p v-for="(c,i) in colOf.data" :class="{'pcBall': _Format.formatCode(colOf.code).add}"  v-if="_Format.formatCode(colOf.code).isNo || _Format.formatCode(colOf.code).add">{{c}}</p>
                    <p :class="{'pcBall': _Format.formatCode(colOf.code).add, 'red': _Format.lotColor(_Util.sumNum(colOf.data), colOf.code) === 'red', 'green': _Format.lotColor(_Util.sumNum(colOf.data), colOf.code) === 'green', 'blue': _Format.lotColor(_Util.sumNum(colOf.data), colOf.code) === 'blue', 'gray': _Format.lotColor(_Util.sumNum(colOf.data), colOf.code) === 'gray'}" v-if="_Format.formatCode(colOf.code).add">{{_Util.sumNum(colOf.data)}}</p>
                    <!--香港六合彩-->
                    <p v-for="(c,i) in colOf.data" class="honKong" :class="{'red': _Format.lotColor(c, colOf.code) === 'red', 'green': _Format.lotColor(c, colOf.code) === 'green', 'blue': _Format.lotColor(c, colOf.code) === 'blue', 'gray': _Format.lotColor(c, colOf.code) === 'gray'}" v-if="_Format.formatCode(colOf.code).zodiac"><span>{{c}}</span><span class="zodiac" v-if="colOf.animals">{{colOf.animals[i]}}</span></p>
                    <!--江苏快三-->
                    <p v-for="(c,i) in colOf.dataImg" class="diceThree" v-if="_Format.formatCode(colOf.code).shares"><img :src="c" alt=""></p>
                    <!--北京pk10-->
                    <p v-for="(c,i) in colOf.data" class="pkTen" v-if="_Format.formatCode(colOf.code).pk10">{{c}}</p>
                    <!--北京快乐8-->
                    <p v-for="(c,i) in colOf.data" class="happy" v-if="_Format.formatCode(colOf.code).happy8">{{c}}</p>
                  </section>
                </article>
                <div class="hostPeriodBtn displayFlex">
                  <p><router-link :to="{name: 'theResults', query: {code: colOf.code, name: colOf.name}}">开奖结果</router-link></p>
                  <p><router-link :to="{name: 'charts', query: {code: colOf.code}}" target= "_blank" class="hostAPeriod">开奖走势</router-link></p>
                  <p><router-link :to="{name: _Util.lotteryNameUtils(colOf.code).name, query: {code: colOf.code, index: _Util.lotteryNameUtils(colOf.code).index, lotteryTrue: true}}">立即投注</router-link></p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import './colorAll.scss';
  export default {
    data() {
      return {
        /*彩种数据*/
        colorOfData: [],
        holdBack: false, //阻止接口
        bankerIcon: require('../../../assets/images/theColor/baccarat/icon/banker.png'),
        idleIcon: require('../../../assets/images/theColor/baccarat/icon/idle.png'),
      }
    },
    created() {
      this.initData();
    },
    activated() {
      if(!this.holdBack) return;
      this.initData();
    },
    mounted() {
      this.initUpData();
    },
    methods: {
      initData() {
        let that = this;
        that._Util.post(that, that._Api.POST_RECOMMENDED_COLOR_DATA, {client: 'pc'}, (data)=> {
          this.holdBack = true;
          that.colorOfData = data;
          that.colorOfData.forEach((v,i)=>{
            if(that._Format.formatCode(v.code).shares) {
              v.dataImg = [];
              v.data.forEach((d,y)=>{
                let img = require('../../../assets/images/theColor/dice/dice' + parseInt(d) + '.png');
                v.dataImg.push(img);
              })
            }
            if(that._Format.formatCode(v.code).baccarat){
              v.wave = v.wave?v.wave.split(","):['1','2','3','4'];
            }
          })
        },(data)=>{
          this.holdBack = false;
        })
      },
      initUpData() {
        let that = this;
        let len = that.colorOfData.length;
        for (let i = 0; i < len; i++) {
          that.colorOfData[i].href = that._Api.LOCAL_HOST + 'charts?id=' + that.colorOfData[i].id;
        }
      }
    }
  }
</script>
